import React, {Component} from "react";
import {Breadcrumb, Cascader, Checkbox,Radio,Input,Button} from 'antd';
import '../Dxdd/Dxdd.css'

const options = [
    {
        value: 'zhuzhai',
        label: '住宅',
        children: [
            {
                value: 'yishi',
                label: '一室一厅',
            },
            {
                value: 'ershi',
                label: '两室一厅',
            },
            {
                value: 'erting',
                label: '两室两厅',
            },
            {
                value: 'sanshi',
                label: '三室一厅',
            },
            {
                value: 'sanshierting',
                label: '三室两厅',
            },
        ],
    },
    {
        value: 'shangpu',
        label: '商铺',
        children: [
            {
                value: 'dan',
                label: '单层商铺',
            },
            {
                value: 'duo',
                label: '多层商铺',
            },
        ],
    },
    {
        value: 'xiezilou',
        label: '写字楼',
        children: [
            {
                value: 'aji',
                label: 'A级写字楼',
            },
            {
                value: 'bji',
                label: 'B级写字楼',
            },
            {
                value: 'cji',
                label: 'C级写字楼',
            },
        ],
    },
];

function onChange(value) {
    console.log(value);
}

function onChangeCheck(e) {
    console.log(`checked = ${e.target.checked}`);
}
function onChangeRadio(e) {
    console.log(`radio checked:${e.target.value}`);
}

// function checkName() {
//     let a=document.getElementById("shuruMz")
//     if (this.value=="") {
//         a.display='block'
//     }
// }
class Dxdd extends Component {
    state = {
        value: 1,
    };
    onChange = e => {
        console.log('radio checked', e.target.value);
        this.setState({
            value: e.target.value,
        });
    };
    render() {
        return (
            <div>
                <Breadcrumb>
                    <Breadcrumb.Item>Home</Breadcrumb.Item>
                    <Breadcrumb.Item>
                        {/* <a href="">我的</a> */}
                        交易
                    </Breadcrumb.Item>
                    <Breadcrumb.Item>代下订单</Breadcrumb.Item>
                </Breadcrumb>
                <div className="choose">
                    <div className="text1">选择楼盘:</div>
                    <div>
                        <Cascader options={options} onChange={onChange} placeholder="请选择楼盘"/>
                    </div>
                    <div><Checkbox onChange={onChangeCheck}>记住当前选择楼盘</Checkbox></div>
                </div>
                <div className="line2"/>
                <div className="youhui">
                    <div className="text1">优惠券：</div>
                    <div className="radioButton1">
                        <Radio.Group className="radioG" onChange={onChangeRadio} defaultValue="a">
                            <div>
                                <Radio.Button value="a">交1000抵3000</Radio.Button>
                            </div>
                           <div>
                               <Radio.Button value="b">交2000抵7000</Radio.Button>
                           </div>
                           <div>
                               <Radio.Button value="c">交3000抵14000</Radio.Button>
                           </div>
                           <div>
                               <Radio.Button value="d">交5000抵20000</Radio.Button>
                           </div>
                        </Radio.Group>
                    </div>
                </div>
                <div className="line2"/>
                <div className="maijia">
                    <div className="text1">买家姓名：</div>
                    <div className="maiName">
                        <Input  onBlur={this.inputOnBlur } placeholder="非常重要，身份验证需要，请填写与证件号码一致的真实姓名"/>
                    </div>
                    {/*<div id="shuruMz">*/}
                    {/*    请输入名字*/}
                    {/*</div>*/}
                </div>
                <div className="line2"/>
                <div className="maijia">
                    <div className="text1">身份证号：</div>
                    <div className="maiName">
                        <Input placeholder="非常重要，身份验证需要，请填写正确证件号码"/>
                    </div>
                </div>
                <div className="line2"/>
                <div className="maijia">
                    <div className="text1">手机号码：</div>
                    <div className="maiName">
                        <Input placeholder="非常重要，用于接收电子优惠券短信"/>
                    </div>
                </div>
                <div className="line2"/>
                <div className="maijia1">
                    <div className="text1">关联用户：</div>
                    <div className="maiName">
                        <Input placeholder="填写用户在坤坤买房APP或阳哥网注册手机号"/>
                    </div>
                </div>
                <div className="zhuC">
                    如果该手机号尚未注册，系统将自动生成帐号，以短信形式发送到用户手机
                </div>
                <div className="line2"/>
                <div className="maijia">
                    <div className="text1">支付方式：</div>
                    <div><Radio.Group onChange={this.onChange} value={this.state.value}>
                        <Radio value={1}>现金支付</Radio>
                        <Radio value={2}>POSS刷卡</Radio>
                    </Radio.Group></div>
                </div>
                <div className="line2"/>
                <div className="maijia">
                    <div className="text1">流水号：</div>
                    <div className="maiName">
                        <Input placeholder="如果是现金支付，建议填写收据编号"/>
                    </div>
                </div>
                <div className="line2"/>
                <div className="submitB">
                    <div>
                        <Button type="primary" onClick={this.save}>保存</Button>
                    </div>
                    <div>
                        <Button>取消</Button>
                    </div>
                </div>

            </div>

        )
    }
    inputOnBlur = (e)=>{
        this.setState({
            inputValue: e.target.value,
        })
    };
    save(){
        alert("保存成功")
    }
}

export default Dxdd;